<template>
<div class="bg1">
        <!-- 第一行 -->     
<div class="module-box ">
            <div style="flex:0 1 35%;">
                <dv-border-box-12 style="width:310px;height:350px;position: relative;">
                <!-- <dv-capsule-chart config="config"style="width:100%;height:200px"/> -->
               <!-- <dv-digital-flop :config="config21" style="width:200px;height:50px;position: absolute;top:50%;transform:translateY(-50%);" /> -->
               <div style="color:#fff;display:flex;justify-content:center;margin-top:20px;">违规类型分析</div>
                <dv-scroll-ranking-board :config="config23" :color="green" style="width:280px;height:300px;margin-left:15px;margin-top:10px; " />
                </dv-border-box-12>
            </div>
            <div style="flex:0 1 50%">
                <dv-border-box-1 style="width:100%;height:350px; margin: 10px;">
                     <div style="color:#fff;display:flex;justify-content:center;margin-top:20px;">车辆流量分析</div>
               <lineChartVue />
               
                </dv-border-box-1>
            </div>
            <div style="flex:0 1 15%">
                <dv-border-box-8 style="width:100%;height:350px;">
                  
                   <div style="color:#fff;display:flex;justify-content:center;margin-top:20px;">车辆种类分析</div>
                <dv-active-ring-chart :config="config31" style="width:320px;height:320px;margin-top:20px ;margin-left:-20px" />
               

                </dv-border-box-8>
               
            </div>
        </div>

        <!-- 第二行 -->
          <div class="module-box">
            
                <dv-border-box-9 style="width:600px; height:200px;">
                <!-- <div style="color:#fff;display:flex;justify-content:center; margin-top:10px">单品销量王</div> -->
                <div style="color:#fff;display:flex;justify-content:center;">·</div>
                  <div style="color:#fff;display:flex;justify-content:center;margin-left:320px;">车辆时段分析</div>
                   <RoseChartVue />
                </dv-border-box-9>

                <dv-border-box-10  style="width:700px; height:200px;">
                 <div style="display: flex;justify-content: space-between;">
                 <div style="color:#fff;display:flex;justify-content:center;margin-left:20px;">北区停车场</div>
                  <div style="color:#fff;display:flex;justify-content:center;margin-right:20px;">东区停车场</div>
                  <div style="color:#fff;display:flex;justify-content:center; margin-right:40px;">西区停车场</div>
                  </div>

                <div style="display: flex;justify-content: space-between;">
                <dv-water-level-pond :config="config221" style="width:120px;height:150px;margin-left:20px;margin-top:20px;" />
                <dv-water-level-pond :config="config222" style="width:120px;height:150px;margin-top:20px;" />
                <dv-water-level-pond :config="config223" style="width:120px;height:150px;margin-right:20px;margin-top:20px;" />
                </div>
                </dv-border-box-10>
           
        </div>
        
        <!-- 第三行 -->
        <!-- <div class="module-box ">
            <div style="flex:0 1 50%">
                 <dv-border-box-8 style="width:100%;height:200px;">
                 
                 </dv-border-box-8>
            </div>
            <div style="flex:0 1 25%">
                <dv-border-box-9 style="width:100%;height:200px;">dv-border-box-3</dv-border-box-9>
            </div>
            <div style="flex:0 1 25%">
                <dv-border-box-10 style="width:100%;height:200px;">dv-border-box-3</dv-border-box-10>
            </div>
        </div> -->

</div>
</template>

<script>
import lineChartVue from '../dataComponents/lineChart.vue'
import PointChartVue from '../dataComponents/PointChart.vue'
import RoseChartVue from '../dataComponents/RoseChart.vue'
export default {
name: "Data2",
components:{
lineChartVue,
PointChartVue,
RoseChartVue
},
data() {
    return {
        config12:{
             data: [
            {
            name: '周一',
            value: 55
            },
            {
            name: '周五',
            value: 60
            },
            {
            name: '周四',
            value: 40
            },
            {
            name: '周六',
            value: 70
            },
            {
            name: '周末',
            value: 80
            },
            {
            name: '周二',
            value: 35
            },
            {
            name: '周三',
            value: 32
            }
        ],
        showValue: true

        },

        config21:{
            number: [17],
            toFixed: 2,
            style:[3],
            content: '外卖：{nt}元'
        },

        config23:{
            data: [
        {
        name: '交叉路口停车',
        value: 55
        },
        {
        name: '禁停标志处停车',
        value: 120
        },
        {
        name: '自行车未上锁',
        value: 78
        },
        {
        name: '人行道上停车',
        value: 66
        },
        {
        name: '占用多个车位',
        value: 100
        },
        {
        name: '消防通道停车',
        value: 45
        },
        {
        name: '压线停放',
        value: 29
        }
        ]         
        },
        config33:{
             value: 66,
            localGradient: true
        },
        config31:{
            data: [
            {
            name: '自行车',
            value: 55
            },
            {
            name: '电瓶车',
            value: 120
            },
            {
            name: '小轿车',
            value: 178
            },
            {
            name: '面包车',
            value: 16
            },
            {
            name: '货车',
            value: 10
            }
        ]
},config221:{ 
    data: [66, 45],
    shape: 'roundRect'}
,config222:{ 
    data: [46, 35],
    shape: 'roundRect'}
    ,config223:{ 
    data: [26, 20],
    shape: 'roundRect'}
    }
},

}
</script>
<style>
.bg1 {
    /* background:  url("../../assets/img/dataBg.jpg"); */
     background-color: rgba(9, 10, 51, 0.974);
    background-size: cover;
    height: 100vh; /* 设置背景高度为屏幕高度 */
  }
.module-box {
  display: flex;
  justify-content: space-between;
  
  flex-direction: row; /* 修改：横向布局 */
  margin: 5px;
}
.d-flex {
    display: flex;
}
</style>